<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle"/>
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<view class="head">
					<view class="item">
						<view class="left">{{feizixuan}}</view>
						<image  @click="showProp" src="../../static/imags/xia.png" class="right"></image>
					</view>
					<view class="item">
						<view class="left">{{gongqiuxuanze}}</view>
						<image @click="showu" src="../../static/imags/xia.png" class="right"></image>
					</view>
					<view class="item">
						<view class="left">{{diquxuanze}}</view>
						<image @click="showf" src="../../static/imags/xia.png" class="right"></image>
					</view>
				</view>
				<view style="height: 4rpx;"></view>
				<view v-for="(item,index) in itemList" :key="index">
					<view v-show="index == 2">
						<image  style="margin-top: 28rpx;width: 686rpx;height: 184rpx;" src="../../static/imags/Frame_12.png">
							
						</image>
					</view>
					<view class="show-items-item" >
						<view class="show-items-item-left">
						  <image class="show-items-item-image" src="../../static/imags/Frame_11.png">				  
						  </image>
						  <view class="show-items-item-image-bontton" >
						  	 <image src="../../static/imags/Time_(时间).png"></image>	
						  					 <view>2024.10.20</view>
						  </view>
						</view>
						<view class="show-items-item-right" @click="goDetail(item)">
						  <view class="show-items-item-right-one">
							  <view>数码印花纸出售一车</view>
							  <view>供应</view>
						  </view>
						  <view>
							  30克以下
						  </view>
						  <view>
							  存白色
						  </view>
						  <view class="show-items-item-right-four">
							  <image src="../../static/imags/Local_(已定位)(1).png"></image>
							  <view>浙江.绍兴</view>
							  <view>￥1600 (或电议)</view>
						  </view>
						  <view class="show-items-item-right-five">
							  <image src="../../static/imags/tx.jpeg"></image>
							  <view>数码印花</view>
							  <view>会员级别</view>
						  </view>
						  <view class="show-items-item-right-six">
							 <image class="show-items-item-right-six-image1" src="../../static/imags/Frame(4).png"></image>
							 <view class="show-items-item-right-six-view1">999999</view>
							  <image class="show-items-item-right-six-image2" src="../../static/imags/Frame(5).png"></image>
							  <view class="show-items-item-right-six-view2">999999</view>
						  </view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
			
		
		 <!-- 筛选条件部分 -->
		  <view class="content" v-if="showPopup">
			  <view class="head_der">
				  <!-- 左侧分类列表 -->
				  <view class="left-menu">
				         废塑
				  </view>	
				  <!-- 右侧标签组 -->
				 <scroll-view class="right-content" scroll-y>
				   <view
				     class="tag-group"
				     v-for="(group, groupIndex) in groups"
				     :key="groupIndex"
				   >
				     <!-- 组标题 -->
				     <view class="group-header" @click="toggleGroup(groupIndex)">
				       <view class="group-title">{{ group.title }}</view>
				       <image
				         :src="group.expanded ? '../../static/imags/shang.png' : '../../static/imags/xia.png'"
				         class="toggle-icon"
				       ></image>
				     </view>
				 
				     <!-- 标签列表 -->
				     <view class="tag-list" v-if="group.expanded">
				       <view
				         class="tag"
				         v-for="(tag, tagIndex) in group.tags"
				         :key="tagIndex"
				         :class="{ active: tag.selected }"
				         @click="toggleTag(groupIndex, tagIndex)"
				       >
				         {{ tag.name }}
				       </view>
				     </view>
				   </view>
				 </scroll-view>

			  </view>
		    
			<view class="footer">
			    <view class="btn cancel" @click="closePopup">取消</view>
			    <view class="btn reset" @click="resetFilters">重置</view>
			    <view class="btn confirm" @click="confirmSelection">确定</view>
			</view>
		  </view>
		
		 
		<u-picker :show="show2" ref="uPicker2" :columns="columns2" @confirm="confirm2" @cancel="cancel2"></u-picker>
		<u-picker :show="show3"  :loading="loading" ref="uPicker3" :columns="columns3" @confirm="confirm3" @cancel="cancel3" @change="changeHandler"></u-picker>
	</view>
</template>

<script>
import CustomNavbarTwo from "@/components/CustomNavbarTwo.vue";
	const api = require('../../util/api.js');
	export default {
		components: { CustomNavbarTwo},
		data() {
			return {
				itemList: [1,2,3],
				pageTitle:"设备资源",
				feizixuan:"废纸选择",
				showPopup: false,
				groupIndex: null,
				tagIndex: null,
				categories: [
				  { name: '废纸' },
				  { name: '废塑' },
				  { name: '废辅料' },
				],
				groups: [
				  {
				    title: '塑料瓶',
				    expanded: true,
				    tags: [
				      { name: '三色瓶胚', selected: false },
				      { name: '蓝白瓶', selected: false },
				      { name: '花乙', selected: false },
					   { name: '三色瓶', selected: false },
				    ],
				  },
				  {
				    title: '塑料瓶',
				    expanded: true,
				    tags: [
				      { name: '三色瓶胚', selected: false },
				      { name: '蓝白瓶', selected: false },
				      { name: '花乙', selected: false },
				  	  { name: '三色瓶胚瓶胚', selected: false },
				    ],
				  },
				  {
				    title: '塑料瓶',
				    expanded: true,
				    tags: [
				      { name: '三色瓶胚', selected: false },
				      { name: '蓝白瓶', selected: false },
				      { name: '花乙', selected: false },
				  	 { name: '三色瓶胚瓶胚', selected: false },
				    ],
				  },
				  {
				    title: '塑料瓶',
				    expanded: true,
				    tags: [
				      { name: '三色瓶胚', selected: false },
				      { name: '蓝白瓶', selected: false },
				      { name: '花乙', selected: false },
				  	{ name: '三色瓶', selected: false },
				    ],
				  },
				  {
				    title: '塑料瓶',
				    expanded: true,
				    tags: [
				      { name: '三色瓶胚', selected: false },
				      { name: '蓝白瓶', selected: false },
				      { name: '花乙', selected: false },
				  	 { name: '三色瓶胚瓶胚', selected: false },
				    ],
				  },
				  {
				    title: '废辅料',
				    expanded: true,
				    tags: [
				      { name: '蛇皮袋', selected: false },
				      { name: '绿地带', selected: false },
				    ],
				  },
				],
				gongqiuxuanze:"供求选择",
				diquxuanze:"地址选择",
				show2: false,
				columns2: [
				    ['全部', '出售', '采购']
				],
				show3: false,
				loading: false,
				columnData: [
					  ['全部'],
					  ['深圳', '厦门', '上海', '拉萨'],
					  ['得州', '华盛顿', '纽约', '阿拉斯加']
				],
				columns3: [
				  ['全部','中国', '美国'],
				  ['全部'],
				]
		};
	},
	
	methods: {
		// 切换组的展开状态
		toggleGroup(groupIndex) {
		  this.groups[groupIndex].expanded = !this.groups[groupIndex].expanded;
		},
		// 切换标签的选中状态
		toggleTag(groupIndex, tagIndex) {
			// 遍历所有组和标签，将 selected 设置为 false
			this.groups.forEach(group => {
			  group.tags.forEach(tag => {
			    tag.selected = false;
			  });
			});
		    this.groups[groupIndex].tags[tagIndex].selected = !this.groups[groupIndex].tags[tagIndex].selected;
			this.groupIndex = groupIndex
			this.tagIndex = tagIndex
		},
		resetFilters() {
			this.groups.forEach(group => {
			  //group.expanded = false
			  group.tags.forEach(tag => {
			    tag.selected = false;
			  });
			});
			this.feizixuan = "废纸选择" 
		},
		showProp() {
			this.showPopup = true;
		},
		closePopup() {
		  this.showPopup = false;
		},
		confirmSelection() {
		  const group = this.groups[this.groupIndex]
		  const tag = group.tags[this.tagIndex]
		  if(tag.selected) {
			   this.feizixuan = tag.name
		  }else{
			   this.feizixuan = "废纸选择" 
		  }
		  this.closePopup();
		},
		showu() {
			if(this.showPopup) {
				return
			}
			this.show2 = true
		},
		// 回调参数为包含columnIndex、value、values
		confirm2(e) {
			this.gongqiuxuanze = e.value[0]
		    this.show2 = false
		},
		cancel2() {
			 this.show2 = false
		},
		changeHandler(e) {
		    const {
		        columnIndex,
		        index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker3
		    } = e
		    if (columnIndex === 0) {
		        this.loading = true
		        // 模拟网络请求
		        uni.$u.sleep(500).then(() => {
		            picker.setColumnValues(1, this.columnData[index])
		            this.loading = false
		        })
		    }
		},
		showf() {
			if(this.showPopup) {
				return
			}
			this.show3 = true
		},
		confirm3(e) {
			 const p =  e.value[0]
			 const c =  e.value[1]
			 if("全部" == p) {
				 this.diquxuanze = p
			 }else {
				 this.diquxuanze = p + "-" + c 
			 }
		    this.show3 = false
		},
		cancel3() {
			 this.show3 = false
		}
	},
}
</script>

<style lang="scss" scoped>
	.my_container {
		width: 100%;
		.my_container_body {
			width: 750rpx;
			height: 1624rpx;
			background: linear-gradient( 180deg, #DDFFDE 0%, #F7F7F7 29%, #F7F7F7 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			.my_container_body_head {
				width: 686rpx;
				height: 154rpx;
			}
			.my_container_body_body {
				width: 686rpx;
				margin-left: 32rpx;
				.head {
					height: 40rpx;
					width: 686rpx;
					display: flex;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					.item {
						display: flex;
						width: 228rpx;
						.left{
							height: 40rpx;
							width: auto; /* 允许内容扩展 */
						}
						.right {
							width: 28rpx;
							height: 28rpx;
							margin-top: 6rpx;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							margin-left: 6rpx;
						}
					}
					:nth-child(1) {
						justify-content: flex-start; /* 默认靠左对齐 */
					}
					:nth-child(2) {
						justify-content: center; /* 默认居中 */
					}
					:nth-child(3) {
						justify-content: flex-end; /* 默认靠右对齐 */
					}
				}
				.show-items-item {
					width: 686rpx;
					height: 322rpx;
					background: #FFFFFF;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					margin-top: 28rpx;
					display: flex;
					.show-items-item-left {
						.show-items-item-image {
							width: 212rpx;
							height: 224rpx;
							margin-top: 28rpx;
							margin-left: 20rpx;
						}
						.show-items-item-image-bontton {
							height: 70rpx;
							width: 212rpx;
							margin-left: 20rpx;
							display: flex;
							margin-top: 20rpx;
							image{
								width: 36rpx;
								height: 36rpx;
							}
							view{
								width: 128rpx;
								height: 36rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #777777;
								line-height: 36rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								margin-left: 4rpx;
							}
						}
					}
					.show-items-item-right {
						margin-left: 20rpx;
						height: 322rpx;
						.show-items-item-right-one {
							display: flex;
							:nth-child(1) {
								margin-top: 38rpx;
								width: 250rpx;
								height: 40rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 500;
								font-size: 28rpx;
								color: #333333;
								line-height: 39rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
							:nth-child(2) {
								width: 72rpx;
								height: 34rpx;
								line-height: 34rpx;
								background-color: #FFECEC;
								border-radius: 112rpx 112rpx 112rpx 112rpx;
								margin-top: 28rpx;
								margin-left: 98rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 18rpx;
								color: #FF3939;
								text-align: center;
								padding-top: 4rpx;
								font-style: normal;
								text-transform: none;
							}
						}
						:nth-child(2),:nth-child(3) {
							width: 200rpx;
							height: 34rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #777777;
							line-height: 34rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-top: 10rpx;
						}
						.show-items-item-right-four {
							display: flex;
							width: 414rpx;
							height: 44rpx;
							image{
								width: 24rpx;
								height: 26rpx;
								border-radius: 0rpx 0rpx 0rpx 0rpx;
								margin-top: 9rpx;
							}
							:nth-child(2) {
								width: 145rpx;
								height: 34rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #777777;
								line-height: 34rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								margin-top: 5rpx;
								padding-left: 4rpx;
							}
							:nth-child(3) {
								width: 237rpx;
								height: 44rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 20rpx;
								color: #FF4400;
								line-height: 28rpx;
								text-align: right;
								font-style: normal;
								text-transform: none;
							}
						}
						.show-items-item-right-five {
							display: flex;
							width: 414rpx;
							height: 44rpx;
							
							image{
								width: 40rpx;
								height: 40rpx;
								margin-top: 2rpx;
								border-radius: 24rpx 24rpx 24rpx 24rpx;
							}
							:nth-child(2) {
								width: 220rpx;
								line-height: 44rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #777777;
								line-height: 44rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								margin-top: 5rpx;
								padding-left: 10rpx;
							
							}
							:nth-child(3) {
								width: 154rpx;
								line-height: 44rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 20rpx;
								color: #FF4400;
								line-height: 44rpx;
								text-align: right;
								font-style: normal;
								text-transform: none;
								
							}
						}
						.show-items-item-right-six {
							height: 60rpx;
							width: 414rpx;
							display: flex;
							padding-left: 160rpx;
							.show-items-item-right-six-image1 {
								width: 27rpx;
								height: 25.51rpx;						
								margin-top: 28rpx;
							}
							.show-items-item-right-six-image2 {
								width: 26.67rpx;
								height:24.67rpx;
								margin-top: 28rpx;
							}
							.show-items-item-right-six-view1 {
								width: 100rpx;
								height: 60rpx;
								line-height: 60rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 26rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								padding-left: 6rpx;
							}
							.show-items-item-right-six-view2 {
								padding-left: 6rpx;
								width: 100rpx;
								height: 40rpx;
								margin-top: 22rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 26rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
						}
					}
				}
			}
		}
		// 变量定义
		.content {
		  position: fixed; /* 固定位置 */
		   bottom: 0;       /* 从屏幕底部开始 */
		   left: 0;         /* 水平从左侧开始 */
		   width: 100%;     /* 占满屏幕宽度 */
		   height: 810rpx; /* 内容高度 */
		   background: #FFFFFF;
		   flex-direction: column;
		   z-index: 9999; /* 确保覆盖内容部分 */
		  background: #FFFFFF;
		  .head_der {
			  width: 100%;    
			  display: flex;
			  // 左侧分类列表
			  .left-menu {
			   width: 178rpx;
			   height: 676rpx;
			   background: #F6F6F6;
			   border-radius: 0rpx 24rpx 24rpx 0rpx;
               text-align: center;
			   line-height: 676rpx;
			  }
			  		
			  // 右侧标签组
			  .right-content {
			    flex: 1;
			    width: 512rpx;
			    height: 676rpx;
			    overflow-y: scroll;
			    margin-left: 30rpx;
			    .tag-group {
				  width: 512rpx;
			      margin-bottom: 20rpx;
			      .group-header {
			        display: flex;
			        justify-content: space-between;
			        align-items: center;
			        padding: 10rpx 0;
			        font-size: 28rpx;
			        color: #333;
			        border-bottom: 1px solid #ddd;
			        .group-title {
			          flex: 1;
					  font-weight: 550;
			        }
			  		
			        .toggle-icon {
			          width: 28rpx;
			          height: 28rpx;
			        }
			      }
			  		
			      .tag-list {
			        display: flex;
			        flex-wrap: wrap;
			        gap: 10rpx;
			        margin-top: 10rpx;
			  		
			        .tag {
			          padding: 10rpx 20rpx;
			          font-size: 24rpx;
			          background-color: #f4f4f4;
			          border-radius: 20rpx;
			          color: #333;
			          cursor: pointer;
			  		
			          &.active {
			            background-color:  #1EE825;;
			            color: #fff;
			          }
			        }
			      }
			    }
			  }
		
		  }
		  // 底部操作栏
		  .footer {
		    display: flex;
		    width: 750rpx;
		    height: 134rpx;
		    .btn {
		     width: 207rpx;
		     height: 76rpx;
		     background: #FFFFFF;
		     border-radius: 84rpx 84rpx 84rpx 84rpx;
		     border: 2rpx solid #DADADA;
			 font-weight: 400;
			 font-size: 28rpx;
			 color: #777777;
			 margin-left: 32rpx;
			 text-align: center;
			 line-height: 76rpx;
			 margin-top: 32rpx;
		      &.confirm {
			   color: #FFFFFF;
		       background: #1EE825;
		      }
		    }
		  }
		}
	}
</style>